<template>
  <div class="materials">
    <ul>
      <li v-for="m in materials" :key="m.fileName" @click="handleClick(m.url)">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="`#${getIcon(m.fileName)}`"></use>
        </svg>
        <div class="file-name">&nbsp;&nbsp;{{ m.fileName }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
const typeMapIcon = {
  pdf: "icon-Pdf",
  ppt: "icon-ppt",
  doc: "icon-word",
  docx: "icon-word",
  excel: "icon-excel",
  txt: "icon-txt",
  png: "icon-PNG",
  jpg: "icon-Jpg",
};
export default {
  name: "FileLine",
  computed: {
    ...mapState("studyAbout", ["materials"]),
  },
  methods: {
    getIcon(fileName) {
      const type = fileName.split(".")[1];
      return typeMapIcon[type];
    },
    handleClick(url) {
      window.open(
        "http://192.168.1.125:8012/onlinePreview?url=" + encodeURIComponent(url)
      );
    },
  },
};
</script>

<style lang='less' scoped>
@commonLineHeight: 20px;
.materials {
  width: 100%;
  margin-top: 20px;
  ul {
    list-style: none;
    padding-left: 0;
    li {
      display: flex;
      cursor: pointer;
      line-height: @commonLineHeight;
      margin-top: 5px;
      .icon {
        font-size: @commonLineHeight;
      }
      .file-name {
        font-size: 10px;
        line-height: @commonLineHeight;
      }
      &:hover {
        background-color: #d8eaf9;
      }
    }
  }
}
</style>